<template>
	<view class="userinfo">
		<image class="avatar" :src="userinfo.avatar"></image>
		<text class="name">{{userinfo.nickname}}</text>
		<view class="label">
			<image class="star" src="../../static/imgs/star.png"></image>
			<text class="num">{{userinfo.user_id}}</text>
			<image class="star" src="../../static/imgs/star.png"></image>
		</view>
		<text class="phone-text">手机号</text>
		<text class="phone">{{userinfo.phone}}</text>
		<text class="unit-text">单位</text>
		<text class="unit">{{userinfo.danson}}</text>
		<text class="organization-text">机构</text>
		<text class="organization">{{userinfo.danson}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {} // 用户信息
			};
		},
		onLoad() {
			console.log(this.$storage.get('userinfo'))
			this.userinfo = this.$storage.get('userinfo')
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';
	
	page {
		@include square(100%, url('/static/imgs/user-bg.png') no-repeat bottom center/100%);
	}
	.userinfo{
		@include square();
		@include flex-col();
		.avatar{
			@include circle(200rpx);
			border:10rpx solid $bg-b;
			margin-top:-188rpx;
		}
		.name{
			margin-top:30rpx;
			@include font-set($font-e, $color-e);
		}
		.label{
			@include box(242rpx, 64rpx, linear-gradient(180deg, #38C6FF 0%, #00AEFF 100%));
			border-radius: 32rpx;
			@include flex-row(space-between);
			padding:0 16rpx;
			margin-top:20rpx;
			margin-bottom:52rpx;
			.star{
				@include square(24rpx);
				display: block;
			}
			.num{
				@include font-set($font-d, $color-a);
			}
		}
		.phone-text, .unit-text, .organization-text {
			@include font-set($font-b, $color-c);
			margin-top:50rpx;
		}
		.phone, .unit, .organization {
			@include font-set($font-d, $color-e);
			margin-top:10rpx;
		}
	}
</style>
